/* eslint-disable react/jsx-pascal-case */
import React, { Component } from 'react'
import { Icon, message } from 'antd';
import axios from 'axios'
import store from '../../../../../redux/store'
import { Provider } from 'react-redux'

import PaginationItem_container from '../../../../../containers/PaginationItem_container.jsx'

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_7nrfxnf9mes.js',
// });

const info = (msg) => {
    message.info(msg);
};

export default class Pagination extends Component {
    constructor(props) {
        super(props);

        this.state = {
            pages: 1,
            currentPage: 1,
            type: 0,
            isMouse: new Array(2).fill(false)
        }

        store.subscribe(() => { // 监听redux变化
            let obj = store.getState();

            if (obj.type !== this.state.type) {
                this.setState({
                    currentPage: obj.page,
                    type: obj.type,
                });
            } else {
                this.setState({
                    currentPage: obj.page,
                });
            }
        })

        axios.get('/static/articleContentList.json').then(res => {
            const pages = res.data.pages;

            this.setState({
                pages
            });
        })
    }

    // 处理分页item传递的数据
    handlePaginationItemData = (index) => {
        this.setState({
            currentPage: index
        });
    }

    handleMosueOver = (index) => {
        let isMouse = new Array(2).fill(false);
        isMouse[index] = true;
        this.setState({
            isMouse
        });
    }

    handleMosueOut = () => {
        let isMouse = new Array(2).fill(false);
        this.setState({
            isMouse
        });
    }

    // 点击后退按钮当前页数减一
    retreatOnePage = () => {
        if (this.state.currentPage === 1) {
            info('当前已是第一页，不可后退！');
            return;
        }
        this.setState({
            currentPage: this.state.currentPage - 1,
        });

        this.props.transfrom_currentPage(this.state.currentPage - 1)
    }

    // 点击前进按钮当前页数加一
    advanceOnePage = () => {
        if (this.state.currentPage === this.state.pages) {
            info('当前已是最后一页，不可前进！')
            return;
        }
        this.setState({
            currentPage: this.state.currentPage + 1
        });

        this.props.transfrom_currentPage(this.state.currentPage + 1)
    }

    componentWillReceiveProps(nextProps) {
        var data;

        if (typeof nextProps.data === 'number') {
            data = nextProps.data;
        }

        if (data) {
            this.handlePaginationItemData(data - 1);
        }
    }

    render() {

        let items = [];

        // 添加分页索引
        // 小于5时全部显示
        if (this.state.pages <= 5) {
            for (let index = 1; index < this.state.pages + 1; index++) {
                items.push(
                    <span
                        className="anticon-portal anticonshenglve"
                        style={{
                            width: 32,
                            height: 32,
                            lineHeight: '32px',
                            textAlign: 'center',
                            backgroundColor: '#fff',
                            border: '1px solid #ddd',
                            borderRadius: '5px',
                        }}
                        key={6}
                    ></span>
                )
            }
        } else {
            for (let index = 1; index <= this.state.pages - 1; index++) {
                if (this.state.currentPage >= 4) {
                    if (index === this.state.currentPage) {
                        items.push(
                            <span
                                className="anticon-portal anticonshenglve"
                                style={{
                                    width: 32,
                                    height: 32,
                                    lineHeight: '32px',
                                    textAlign: 'center',
                                    backgroundColor: '#fff',
                                    border: '1px solid #ddd',
                                    borderRadius: '5px',
                                }}
                                key={6}
                            ></span>
                        )
                        items.push(
                            <Provider store={store} key={index - 1}>
                                <PaginationItem_container
                                    index={index}
                                    handlePaginationItemData={this.handlePaginationItemData}
                                    currentPage={this.state.currentPage}
                                />
                            </Provider>
                        )
                    } else if (index > this.state.currentPage) {
                        continue;
                    } else if (index <= 3) {
                        // 只输出前三个分页索引
                        items.push(
                            <Provider store={store} key={index - 1}>
                                <PaginationItem_container
                                    index={index}
                                    handlePaginationItemData={this.handlePaginationItemData}
                                    currentPage={this.state.currentPage}
                                />
                            </Provider>
                        )
                    }
                }
                else {
                    if (index <= 3) {
                        items.push(
                            <Provider store={store} key={index - 1}>
                                <PaginationItem_container
                                    index={index}
                                    handlePaginationItemData={this.handlePaginationItemData}
                                    currentPage={this.state.currentPage}
                                />
                            </Provider >
                        )
                    }
                }
            }
            // 省略号
            items.push(
                <span
                    className="anticon-portal anticonshenglve"
                    style={{
                        width: 32,
                        height: 32,
                        lineHeight: '32px',
                        textAlign: 'center',
                        backgroundColor: '#fff',
                        border: '1px solid #ddd',
                        borderRadius: '5px',
                    }}
                    key={8}
                ></span>
            )
            // 添加最后一页索引分页
            items.push(
                <Provider store={store} key={7}>
                    <PaginationItem_container
                        index={this.state.pages}
                        handlePaginationItemData={this.handlePaginationItemData}
                        currentPage={this.state.currentPage}
                    />
                </Provider >
            )
        }

        return (
            <div style={{
                width: 1200,
                margin: '0 auto'
            }} className="removeFloat">
                <div style={{
                    height: 32,
                    display: 'flex',
                    width: 433,
                    justifyContent: 'space-between',
                    marginTop: 40,
                    marginLeft: 533
                }}>
                    <span
                        className="anticon-portal anticonqianjin-copy"
                        style={{
                            width: 32,
                            height: 32,
                            lineHeight: '32px',
                            textAlign: 'center',
                            backgroundColor: '#fff',
                            border: (this.state.isMouse[0] ? '1px solid #00CCFF' : '1px solid #ddd'),
                            borderRadius: '5px',
                            color: (this.state.isMouse[0] ? '#00CCFF' : '#000'),
                            cursor: 'pointer'
                        }}
                        key={6}
                        onMouseOver={() => this.handleMosueOver(0)}
                        onMouseOut={this.handleMosueOut}
                        onClick={this.retreatOnePage}
                    ></span>
                    {/* 生成分页列表数据 */}
                    {items}
                    <span
                        className="anticon-portal anticonqianjin"
                        style={{
                            width: 32,
                            height: 32,
                            lineHeight: '32px',
                            textAlign: 'center',
                            backgroundColor: '#fff',
                            border: (this.state.isMouse[1] ? '1px solid #00CCFF' : '1px solid #ddd'),
                            borderRadius: '5px',
                            color: (this.state.isMouse[1] ? '#00CCFF' : '#000'),
                            cursor: 'pointer'
                        }}
                        onMouseOver={() => this.handleMosueOver(1)}
                        onMouseOut={this.handleMosueOut}
                        onClick={this.advanceOnePage}
                    ></span>
                </div>
            </div>
        )
    }
}